Skip to content

(frontend) fix callout block navigation issues & styles #1161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

ZouicheOmar
Copy link
Contributor

@ZouicheOmar ZouicheOmar commented Jul 10, 2025

Purpose

When using the callout block, the cursor gets in non text positions, which is due to the
"GapCursor" prosemirror extension. This extension is not used by docs.
By disabling "gapCursor" on the editor, cursor and arrow navigation behave as expected.
This PR also updates minor styles for the callout block.

Proposal

  • 💄(frontend) update callout styles
  • 🐛(frontend) fix callout block arrow navigation

@ZouicheOmar ZouicheOmar marked this pull request as draft July 10, 2025 14:09
@virgile-dev virgile-dev requested review from AntoLC and removed request for AntoLC July 16, 2025 07:03
@virgile-dev
Copy link
Collaborator

Hey ! Thanks for the follow up @ZouicheOmar
When you're ready please ask @AntoLC for a review :)

@ZouicheOmar ZouicheOmar force-pushed the fix-callout-arrow-nav branch from dbe7d34 to 32230a0 Compare July 22, 2025 18:23
@ZouicheOmar ZouicheOmar marked this pull request as ready for review July 22, 2025 18:25
@ZouicheOmar
Copy link
Contributor Author

ZouicheOmar commented Jul 22, 2025

Also added tests.
@AntoLC would appreciate your review on this

@ZouicheOmar ZouicheOmar marked this pull request as draft July 23, 2025 10:57
@ZouicheOmar ZouicheOmar force-pushed the fix-callout-arrow-nav branch from 32230a0 to 3d4944a Compare July 23, 2025 11:49
@virgile-dev virgile-dev requested a review from AntoLC July 23, 2025 11:53
@ZouicheOmar ZouicheOmar marked this pull request as ready for review July 23, 2025 11:55
@ZouicheOmar ZouicheOmar force-pushed the fix-callout-arrow-nav branch from 3d4944a to 8fa0b8a Compare July 23, 2025 11:57
Copy link
Collaborator

@AntoLC AntoLC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the contribution. 🎉

Some returns.

$height="28px"
$width="28px"
$minWidth="28px"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If $width is set $minWidth is not necessary.

Suggested change
$minWidth="28px"

<Box
as="p"
className="inline-content"
ref={contentRef}
$css={css`
& > div {
padding-top: 2px;
}
`}
/>
</Box>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes well seen, I think $justify="center" will be more appropriate.
I can see as well in the dom that it is a "p" tag that is wrapping a "div" tag, I don't think it is correct, better to let it as a div so (default tag).

Suggested change
<Box
as="p"
className="inline-content"
ref={contentRef}
$css={css`
& > div {
padding-top: 2px;
}
`}
/>
</Box>
<Box
className="inline-content"
ref={contentRef}
$justify="center"
/>
</Box>

@@ -125,6 +125,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
},
uploadFile,
schema: blockNoteSchema,
disableExtensions: ['gapCursor'],
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see the bug actually, could you provide a image or a small video of it ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Demo

Screencast.from.2025-07-23.16-33-36.mp4

Here's what it looks like with the extension enabled. When the cursor goes above or between callouts, a GapCursor instance is added.
The extension comes with tiptap, yet it's not used by any of the Docs blocks.

On the blocknotejs docs

Screencast.from.2025-07-10.16-18-52.mp4

Updated the callout block styles, centered the emoji and aligned the
text to be in the center of the block.
Disabled the "gapCursor" prosemirror extension on the editor.
Cursor gets to non text positions around custom blocks, in this case the
callout block, which is a feature of the "gapCursor" extension.
@ZouicheOmar ZouicheOmar force-pushed the fix-callout-arrow-nav branch from 8fa0b8a to ebffb65 Compare July 23, 2025 14:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants